<template>
  <div>
    <!-- <div class="choseDrillText">
      {{ activeText }}
    </div> -->
    <div>
      <van-field :value="activeText" readonly :border="false" placeholder="请选择下钻条件" class="firstLapping" />
    </div>
    <div class="drilldown">
      <van-tree-select
        :items="pupValue"
        :main-active-index="mainActiveIndex"
        :active-id="activeId"
        @click-nav="onClickNav"
        @click-item="onClickItem"
      />
      <div class="labelDrillDown">
        <van-button plain type="default" @click="handleCancel" class="DrillDownButton">取消</van-button>
        <van-button
          plain
          type="default"
          @click="handleDetermine"
          class="DrillDownButton"
          :disabled="activeId ? false : true"
        >
          确定
        </van-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['pupValue'],
  data() {
    return {
      mainActiveIndex: 0,
      activeId: '', // 选中id
      activeText: '' // 选中文字
    }
  },
  methods: {
    onClickNav(detail) {
      this.mainActiveIndex = detail
    },
    onClickItem(detail) {
      // this.activeId = this.activeId === detail.id ? null : detail.id
      // this.activeId ? (this.tagShow = true) : (this.tagShow = false)
      this.activeId = detail.id
      this.activeText = detail.text
    },
    onClose() {
      console.log('222')
    },
    handleDetermine() {
      const drillFileds = [{ name: this.activeText, code: this.activeId }]
      this.$emit('drilldownDetermine', false, drillFileds)
      this.activeId = '' // 选中id清空
      this.activeText = '' // 选中文字清空
      this.mainActiveIndex = 0 // 回到默认第一个选项
    },
    handleCancel() {
      this.activeId = null
      this.activeText = null
      this.mainActiveIndex = 0
      this.$emit('closepup', false)
    }
  }
}
</script>

<style lang="scss" scoped>
.firstLapping {
  height: 40px;
  width: 335px;
  margin: 0 auto;
  margin-bottom: 14px;
  border-radius: 2px;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 1);
}
/deep/.van-sidebar-item {
  background-color: transparent;
}
/deep/.van-field__control {
  color: #fff;
}
.drilldown {
  /deep/.van-tree-select {
    height: 30vh !important;
    // padding: 0px 10px;
  }
  /deep/.van-tree-select__nav-item {
    color: rgba(255, 255, 255, 0.72);
  }
  /deep/.van-tree-select__content {
    background: #032571;
  }
  /deep/.van-tree-select__nav {
    background: #092d7e;
  }
  /deep/.van-sidebar-item--select,
  .van-sidebar-item--select:active {
    background-color: #032571;
    color: #fff;
  }
  /deep/.van-tree-select__item {
    color: rgba(255, 255, 255, 0.72);
  }
  /deep/.van-tree-select__item--active {
    color: rgba(255, 255, 255, 1);
  }
  .labelDrillDown {
    display: flex;
    justify-content: space-between;
    padding: 10px 20px 13px 20px;
  }
  .DrillDownButton {
    width: 160px;
    height: 48px;
    font-size: 16px;
  }
}
</style>
